<template>
  <div class="main">
    <section class="top">
      <div class="img">
        <input type="file" class="file" @change="handleFileUpload" />
        <span class="left"> 头像 </span>
        <div class="right">
          <img :src="`http://elm.cangdu.org/img/${userInfo.avatar}`" alt="" />
          <span class="arrow"></span>
        </div>
      </div>
      <div class="name" @click="handleSkipSetUserName">
        <span>用户名</span>
        <div class="right">
          <span>{{ userInfo.username }}</span>
          <span class="arrow"></span>
        </div>
      </div>
      <div class="address" @click="handleSkipAddress">
        <span>收货地址</span>
        <div class="right">
          <span class="arrow"></span>
        </div>
      </div>
    </section>
    <section class="center">
      <div class="binding">账号绑定</div>
      <div class="phone" @click="handleBinding">
        <div class="left">
          <img src="~assets/img/profile/bindphone.png" alt="" /> 手机
        </div>
        <span class="arrow"></span>
      </div>
    </section>
    <section class="bottom">
      <div class="set">安全设置</div>
      <div class="password" @click="handleSkipForget">
        <span>登录密码</span>
        <div>
          <span class="modify">修改</span>
          <span class="arrow"></span>
        </div>
      </div>
    </section>
    <div class="sign-out" @click="handleSignOut">退出登录</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
  },
  methods: {
    handleFileUpload(e) {
     this.$emit('handleFileUpload',e.target.files)
    },
    handleSkipSetUserName() {
      this.$router.push('/profile/info/setusername')
    },
    handleSkipAddress() {
      this.$router.push('/profile/info/address')
    },
    handleBinding() {
       this.$toast.handleTipsText("请在手机APP中设置")
    },
    handleSkipForget() {
      this.$router.push('/forget')
    },
    handleSignOut() {
      this.$toast.handleTipsText('是否退出登录','sign-out');
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  font-size: 14px;
  color: #333333;
  .arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #dbdbdb;
    border-right: 2px solid #dbdbdb;
    margin-left: 10px;
    transform: rotate(45deg);
  }
  .top .img,
  .top .name,
  .top .address,
  .center .phone,
  .bottom .password {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-top: 2px solid #f2f2f2;
  }
  .top {
    margin-top: 10px;
    background-color: #fff;
    .img {
      position: relative;
      .file {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
      }
      .right {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }
    .name,
    .address {
      border-bottom: 2px solid #f2f2f2;
    }
    .address {
      border-top: 0;
    }
  }
  .center {
    .phone {
      .left {
        display: flex;
        align-items: center;
        img {
          margin-right: 10px;
        }
      }
    }
  }
  .center .binding,
  .bottom .set {
    padding: 12px;
    font-size: 12px;
    color: #666666;
  }

  .center .phone,
  .bottom .password {
    border-bottom: 2px solid #f2f2f2;
    background-color: #fff;
  }
  .bottom {
    .password {
      .modify {
        color: #dbdbdb;
      }
    }
  }
  .sign-out { 
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    margin: 30px 10px 0 10px;
    background-color: #d8584a;
    color: #fff;
  }
}
</style>